<template>
    <el-dialog :model-value="visible" :title="isEdit ? '编辑用户' : '创建新用户'"
        @update:model-value="$emit('update:visible', $event)" width="60%">
        <el-form :model="form" ref="userFormRef" label-width="120px" :rules="rules">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="realName">
                <el-input v-model="form.realName" placeholder="请输入真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-select v-model="form.gender" placeholder="请选择性别">
                    <el-option label="男" value="MALE"></el-option>
                    <el-option label="女" value="FEMALE"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="roles">
                <el-select v-model="form.roles" multiple placeholder="请选择角色">
                    <el-option label="管理员" value="ADMIN"></el-option>
                    <el-option label="投研人员" value="RESEARCHER"></el-option>
                    <el-option label="投顾人员" value="ADVISOR"></el-option>
                    <el-option label="交易员" value="TRADER"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="$emit('update:visible', false)">取消</el-button>
                <el-button type="primary" @click="submitForm">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, watch, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
    visible: Boolean,
    userData: Object,
});

const emit = defineEmits(['update:visible', 'saved']);

const isEdit = ref(false);
const form = ref({});
const userFormRef = ref(null);

const initForm = () => {
    isEdit.value = !!props.userData?.id;
    if (isEdit.value) {
        form.value = JSON.parse(JSON.stringify(props.userData));
    } else {
        form.value = {
            username: '',
            password: '',
            email: '',
            realName: '',
            roles: [],
        };
    }
};

const rules = reactive({
    username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
    password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
    email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
    realName: [{ required: true, message: '真实姓名不能为空', trigger: 'blur' }],
    roles: [{ required: true, message: '必须至少分配一个角色', trigger: 'change' }],
});

watch(() => props.visible, (newVal) => {
    if (newVal) {
        initForm();
    }
});

const submitForm = async () => {
    if (!userFormRef.value) return;
    await userFormRef.value.validate((valid) => {
        if (valid) {
            emit('saved', form.value, isEdit.value);
        } else {
            ElMessage.error('请填写所有必填项');
        }
    });
};
</script>

<style scoped>
.dialog-footer {
    text-align: right;
}
</style>